<!--
 * @Descripttion: 登录
 * @Author: 何伟伦 weilun@ssc-hn.com
 * @Date: 2024-03-18
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2025-06-06
-->
<script lang="ts" setup>
  import { message } from 'ant-design-vue'
  import md5 from 'js-md5'
  import { reactive } from 'vue'
  import { useRouter } from 'vue-router'

  import { requestLogin } from '/@/api/system/ysys-user/account'
  import { ApplicationTypeEnum, AuthTypeEnum, IdentityTypeEnum } from '/@/api/system/ysys-user/account/enum'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { RouterPathEnum } from '/@/enums/routerEnum'
  import { setupMenu } from '/@/menus'
  import { clearCompanyInfo, clearCompanyList, saveToken, saveUserId } from '/@/storage'
  import { useMenu } from '/@/store/modules/menu'
  import { saveCompanyListAndSwitch, saveModuleList } from '/@/utils/account'
  import { validPhone } from '/@/utils/reg'

  const router = useRouter()

  const state = reactive({
    loading: false,
    account: '',
    pwd: '',
    orgCode: undefined,
  })

  /**
   * 校验
   * @returns
   */
  const valid = () => {
    if (state.account === '') {
      message.error('请输入手机号')
      return false
    }
    if (state.pwd === '') {
      message.error('请输入密码')
      return false
    }
    return true
  }

  /**
   * 登录
   */
  const doLogin = async () => {
    if (!valid()) return
    state.loading = true
    const { responseData, responseCode } = await requestLogin({
      identityType: validPhone(state.account) ? IdentityTypeEnum.PHONE : IdentityTypeEnum.EMAIL,
      userName: state.account,
      userPwd: md5(state.pwd),
      authType: AuthTypeEnum.PSD,
      applicationType: ApplicationTypeEnum.PC,
    })
    state.loading = false
    if (responseCode === HttpCodeEnum.SUCCESS) {
      await doAfterLogin(responseData.token, responseData.userId)
      goHomePage()
    }
  }

  /**
   * 登录后存储数据：token、userId、companyList、companyInfo
   * @param token 授权token
   * @param userId 用户id
   */
  const doAfterLogin = async (token: string, userId: string) => {
    saveToken(token)
    saveUserId(userId)
    clearCompanyList()
    clearCompanyInfo()
    await saveCompanyListAndSwitch()
    await setupMenu()
    await saveModuleList()
  }

  /** 跳转首页 */
  const goHomePage = () => {
    const menu = useMenu()
    if (!menu.menus || menu.menus.length === 0) {
      router.push(RouterPathEnum.HOME)
      return
    }
    const firstRoute = menu.menus[0].children[0]
    if (!firstRoute) {
      router.push('/home')
      return
    }
    const secondRoute = firstRoute?.children[0]
    if (!secondRoute) {
      router.push('/home')
      return
    }
    router.push(`${firstRoute.url}${secondRoute?.url || ''}`)
  }

  /**
   * 跳转注册
   */
  const doRegister = async () => router.push(RouterPathEnum.REGISTER)

  /**
   * 忘记密码
   */
  const doForgot = async () => router.push(RouterPathEnum.FORGOT_PWD)

  /**
   * 用户协议
   */
  const doAgreement = async () => {
    const ageUrl = router.resolve({ path: '/agreement' })
    window.open(ageUrl.href, '_blank')
  }
</script>

<template>
  <div class="login">
    <div class="content">
      <div class="login-qrcode" v-if="false"><div class="code-button"></div></div>
      <div class="login-logo"></div>
      <div class="login-title"></div>
      <label class="content-label mt24">账号</label>
      <a-input name="account" autocomplete="off" style="outline: none" class="content-input" type="text" v-model:value="state.account" placeholder="请输入账号" />
      <label class="content-label mt24">密码</label>
      <a-input-password name="pwd" autocomplete="off" class="content-input" v-model:value="state.pwd" placeholder="请输入密码" @keyup.enter="() => doLogin()" />
      <div class="register-container">
        <div>还没有账号？<a class="login-link" @click="() => doRegister()">立即注册</a></div>
        <a class="login-link" @click="doForgot">忘记密码？</a>
      </div>
      <a-button class="content-button" type="primary" block :loading="state.loading" @click="() => doLogin()">登录</a-button>
      <div class="register-container">
        <span>未注册手机验证后自动登录，注册即代表同意<a class="login-link" @click="doAgreement">《用户隐私和服务条款》</a></span>
      </div>
    </div>
    <div class="copyright">Copyright 2024 @ 云海链控股股份有限公司 琼ICP备19003338号-3</div>
  </div>
</template>

<style lang="less" scoped>
  .login {
    width: 100vw;
    min-height: 100vh;
    background: url('/@/assets/images/sys/login/login/bg.png') no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  ::v-deep(.ant-input) {
    background: transparent !important;
    color: rgb(255 255 255 / 85%);
    box-shadow: none;

    &::placeholder {
      color: rgb(255 255 255 / 25%);
    }

    &::-webkit-autofill:focus {
      background-color: transparent !important;
    }
  }

  ::v-deep(.ant-input-suffix) {
    span {
      color: #fff;
    }
  }

  .content {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 44px 54px 77px;
    width: 440px;
    height: 620px;
    background: url('/@/assets/images/sys/login/login/login-container.png') no-repeat;
    border-radius: 12px;
    overflow: hidden;
    z-index: 2;

    .login-qrcode {
      position: absolute;
      top: 0;
      right: 0;
      height: 80px;
      width: 80px;
      background: linear-gradient(45deg, transparent 50%, #13c2c2 50%);

      .code-button {
        width: 38px;
        height: 38px;
        background: url('/@/assets/images/sys/login/login/qrcode.png') no-repeat;
        margin-top: 12px;
        margin-left: 31px;
        cursor: pointer;
      }
    }

    .login-logo {
      height: 64px;
      width: 64px;
      background: url('/@/assets/images/sys/login/login/login-logo.png') no-repeat;
      margin: 0 auto;
    }

    .login-title {
      height: 30px;
      width: 150px;
      background: url('/@/assets/images/sys/login/login/login-title.png') no-repeat;
      margin: 17px auto 40px;
    }

    .content-label {
      height: 24px;
      line-height: 24px;
      font-size: 16px;
      font-weight: 500;
      color: rgb(255 255 255 / 85%);
    }

    .content-input {
      border: none;
      border-bottom: 1px solid #4e5969;
      margin-top: 4px;
      background: transparent;
      font-size: 16px;
      font-weight: 400;
      padding-left: 0;
      box-shadow: none;
    }

    .register-container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      color: rgb(255 255 255 / 45%);
      margin-top: 20px;

      .login-link {
        font-weight: 400;
        color: #13c2c2;
      }
    }

    > .content-button {
      height: 44px;
      margin-top: 20px;
      color: #002329;
      background: linear-gradient(90deg, #36cfc9 0%, #13c2c2 100%);
    }
  }

  .copyright {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translate(-50%, 0);
    color: rgb(255 255 255 / 65%);
    font-size: 12px;
    z-index: 1;
  }
</style>
